<template>
  <div class="classicFilm">
    <ul>
      <li v-for="(item,index) in randomMovieList" :key="index">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
          <span>
              <Icon type="ios-star" v-for="n in 4" :key="n" color="#ff9900"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5" color="#ff9900"></Icon><Icon type="ios-star-half" v-else color="#ff9900"></Icon>
              {{ item.rate }}
          </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      movieList: [
        {
          name: 'The Shawshank Redemption',
          url: 'https://movie.douban.com/subject/1292052/',
          rate: 9.6
        },
        {
          name: 'Leon:The Professional',
          url: 'https://movie.douban.com/subject/1295644/',
          rate: 9.4
        },
        {
          name: 'Farewell to My Concubine',
          url: 'https://movie.douban.com/subject/1291546/',
          rate: 9.5
        },
        {
          name: 'Forrest Gump',
          url: 'https://movie.douban.com/subject/1292720/',
          rate: 9.4
        },
        {
          name: 'Life Is Beautiful',
          url: 'https://movie.douban.com/subject/1292063/',
          rate: 9.5
        },
        {
          name: 'Spirited Away',
          url: 'https://movie.douban.com/subject/1291561/',
          rate: 9.2
        },
        {
          name: 'Schindler\'s List',
          url: 'https://movie.douban.com/subject/1295124/',
          rate: 9.4
        },
        {
          name: 'The Legend of 1900',
          url: 'https://movie.douban.com/subject/1292001/',
          rate: 9.2
        },
        {
          name: 'WALL·E',
          url: 'https://movie.douban.com/subject/2131459/',
          rate: 9.3
        },
        {
          name: 'Inception',
          url: 'https://movie.douban.com/subject/3541415/',
          rate: 9.2
        }
      ],
      randomMovieList: []
    };
  },
  created () {
    this.changeLimit();
  },
  methods: {
    changeLimit () {
      function getArrayItems(arr, num) {
        const tempArray = [];
        for (let index in arr) {
          tempArray.push(arr[index]);
        }
        const returnArray = [];
        for (let i = 0; i<num; i++) {
          if (tempArray.length>0) {
            const arrIndex = Math.floor(Math.random()*tempArray.length);
            returnArray[i] = tempArray[arrIndex];
            tempArray.splice(arrIndex, 1);
          } else {
            break;
          }
        }
        return returnArray;
      }
      this.randomMovieList = getArrayItems(this.movieList, 8);
    }
  }

};
</script>

<style lang="scss" scoped>
.classicFilm{

}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.125rem 0;
}
</style>
